<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../5.25/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-parnet></my-parnet>
    </div>
    <!--父组件界面-->
    <template id="parnet">
        <div>
            <h3>手机信息搜索</h3>
            手机品牌:<input type="text" v-model="barnd" />
            <my-child v-bind:name="barnd"></my-child>
        </div>
    </template>
    <!--子组件界面-->
    <template id="child">
        <div>
            <li>手机品牌:{{myPel.barnd}}</li>
            <li>手机型号:{{myPel.mytype}}</li>
            <li>市场价格:{{myPel.price}}</li>
        </div>
    </template>
</body>
<script>
    //注册父组件
    Vue.component('my-parnet',{
        template:"#parnet",
        data() {
            return{
                barnd:""
            }
        }
    })
    //注册子组件查询功能
    Vue.component('my-child',{
        template:"#child",
        data() {
            return{
                content:[
                    {barnd: '华为',mytype: 'Mate20', price:2334},
                    {barnd: '苹果',mytype: 'IPhone 9', price:4566},
                    {barnd: '三星',mytype: 'Galay', price:1244},
                    {barnd: '小米',mytype: 'Mix 20', price:3645},
                    {barnd: '摩托',mytype: 'wer', price:1256}
                ],
                myPel: {barnd: '',mytype: '', price:0}
            }
        },
        props:['name'],
        watch:{
            name(){
                if (this.$props.name) {
                    var found = false
                    this.content.forEach((value, index)=>{
                        if (value.barnd == this.$props.name) {
                            found = value
                        }
                    });
                    this.myPel = found ? found : {barnd: '', mytype: '',price: 0}                        
                } else {
                    return
                }
            }
        }
    })
    var vm = new Vue({
        el:'#app',
    })
</script>
</html>